<script setup lang="ts">
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode'
import axios from 'axios'
import { useRouter } from 'vue-router'
import DialogDemo from '@/views/Dialog/index.vue'

// 用于存储二维码图片的 URL
const qrCodeUrl = ref('')

// 生成微信登录二维码
const generateQRCode = async () => {
  const appId = '你的AppID'
  const redirectUri = encodeURIComponent('https://yourdomain.com/callback') // 回调地址
  const qrCodeApi = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`

  // 通过后端生成二维码图片
  const response = await axios.get('/api/wechat-qrcode', { params: { url: qrCodeApi } })
  qrCodeUrl.value = response.data.qrCodeApi

  // 这里假设后端返回一个唯一的登录标识
  // const loginToken = 'your-unique-login-token'  // deepseek中写的qrCodeApi
  // try {
  //   // 前端生成微信登录二维码  使用 qrcode 库生成二维码图片的 URL
  //   const url = await QRCode.toDataURL(loginToken)
  //   qrCodeUrl.value = url
  // } catch (error) {
  //   console.error('生成二维码时出错:', error)
  // }
}

// 检查二维码扫描状态的函数
const checkQRCodeStatus = () => {
  // 这里需要实现与后端的交互，检查二维码是否被扫描
  // 可以使用 setInterval 定时检查
  const intervalId = setInterval(() => {
    // 模拟后端请求
    // 假设后端有一个 API 用于检查二维码状态
    fetch('/api/check-qr-code-status', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ token: 'your-unique-login-token' }),
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.status === 'scanned') {
          clearInterval(intervalId)
          // 处理登录逻辑
          console.log('二维码已扫描，处理登录逻辑')
        }
      })
  }, 5000) // 每 5 秒检查一次
}

onMounted(() => {
  // 组件挂载后生成二维码
  generateQRCode()
  // 开始检查二维码扫描状态
  checkQRCodeStatus()
})

const handleClick = () => {
  const router = useRouter()
  router.push('/dialogDemo')
}
</script>

<template>
  <div>
    <div>
      <button @click="handleClick">打开弹窗组件</button>
    </div>
    <div class="weixin">
      <h1>PC端二维码登录</h1>
      <!-- 显示生成的二维码 -->
      <img :src="qrCodeUrl" alt="QR Code" />
    </div>
    <div class="bigdata">
      <button>大数据卡顿</button>
    </div>
  </div>
</template>
<style lang="scss"></style>
